<template>
    <div class="">
        <div class="header-wrapper" style="margin-bottom:60px">
            <video-header :type="'videoCenter'"></video-header>
        </div>

        <div class="content">
            <div class="sales-nav-list">
                <span :class="{'active' : index == 1}" @click="navClick(1)">搜索排行</span>
                <span :class="{'active' : index == 2}" @click="navClick(2)">销售动态</span>
                <span :class="{'active' : index == 3}" @click="navClick(3)">搜索动态</span>
            </div>
            <div class="sales-content">
                <search-ranking v-if="index == 1"/>
                <sales-dynamics v-if="index == 2"/>
                <search-dynamic v-if="index == 3"/>
            </div>
        </div>
        <app-footer></app-footer>
    </div>
</template>
<script>
import VideoHeader from '../videoCenter/layout/VideoHeader.vue'
import AppFooter from '@/components/AppFooter.vue'
import SalesDynamics from "./SalesDynamics"
import SearchRanking from "./SearchRanking"
import SearchDynamic from "./SearchDynamic"
export default {
    data() {
        return {
            index: 2
        }
    }, 
    components: {
        VideoHeader,
        AppFooter,
        SalesDynamics,
        SearchRanking,
        SearchDynamic
    },
    methods: {
        navClick(index) {
            this.index = index;
        }
    }
}
</script>
<style scoped>
    .sales-nav-list {
        text-align: center;
        
    }
    .sales-nav-list span {
        display: inline-block;
        padding-bottom: 15px;
        margin: 0 20px;
        color: #44a0d5;
        cursor: pointer;
    }
    .sales-nav-list span.active {
        border-bottom: 2px solid #44a0d5;
    }
    .sales-content {
        width: 100%;
        /* background-color: #f0f0f0; */
        padding: 10px 0;
    }
</style>